<template>
    <div class="divSection startPage">
        <div v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username" key="username-input">
      </div>
      <div v-else>
          <label>Email</label>
          <input placeholder="Enter your email address" key="email-input">
      </div>
      <button @click="changeType" value="toggle login type" style="size: 200px"></button>
      </div>
  </template>
  <style type="text/css">
    .startPage{
        position: absolute;
        top:0;
        left: 0;
        background-position: bottom center;
        background-size: 100% auto;
        background-color: rgba(0,0,0,0.5);
    }

</style>
<script type="text/javascript">
    export default{
        data(){
            return {
              loginType:"username"
          }
      },
      watch: {
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.getAnswer()
      }
  },
  methods:{
        changeType(){
            if(this.loginType == "username"){
                this.loginType = "email";
            }else{
                this.loginType = "username";
            }
        }
  }
}
</script>